<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{
        margin: 20px;
        padding: 0;
    }

    .box1{
        padding: 20px;
        background-color: skyblue;
    }
    .box2{
        background-color: orangered;
    }
    ul{
        width: 500px;
        height: 400px;
        background-color: pink;
    }
    ul li{
        width: 300px;
        height: 100px;
        background-color: royalblue;
    }
    .srco{
        width: 200px;
        height: 500px;
        overflow: auto;
        background-color: pink;

    }
    .srco p{
       height: 1000px;
       width: 100px;
       background-color: red;
    }
    .smlbox{
        width: 200px;
        height: 200px;
    }
</style>
<script src="../VUE/min.Vue"></script>
<!-- 
        Vue中的事件修饰符：
                1.prevent:阻止默认事件(如a标签点击跳转)
                2.stop:(阻止事件冒泡)
                3.once：(事件只触发一次)
                4.capture：(使用事件的捕获模式，也可以阻止事件冒泡)
                5.self:只有event.target是当前操作的元素才触发事件
                6.passive：事件的默认行为立即执行，无需等待事件回调执行完毕(在移动端开发中应用较多)

                备注：事件修饰符可以连用，当一个a标签存在于一个div中，div和a标签都绑定了相同事件，那么此时点击
                      a标签就会同时触发事件冒泡和默认行为：跳转，所以此时就需要事件修饰符连用


                事件：事件分为事件捕获阶段和事件冒泡阶段，一般情况下，会将由外向内所有的事件捕获到
                      然后再由内向外将所有的事件冒泡出去。所以  2.stop  是绑定给子元素， 4.capture
                      是绑定给父元素(外面的，先被捕获到的，先执行了父元素绑定的事件再执行子元素的)
                      element事件对象的概念：用什么触发了事件，当鼠标点击时，键盘上的某个键被按下时。。
                      触发事件的对象就是事件对象。
                      target的概念，当ul绑定了点击事件，点击ul中的某个li时，此时被点击的这个li标签因为
                      事件委派的原因也会触发点击事件，此时target对应的就是这个被点击的li标签,于是就可以
                      给ul添加self  只有target是ul本身的时候才会执行回调 , 此时点击ul下的li就不会执行回调了

                      passive的应用场景：有两种滚动事件，一种是scroll，一种是wheel，scroll是当滚动条
                      滚动时触发的事件 ，第二种是当鼠标上的滚轮被滚动时触发的事件，所以
                      第二种即使到了滚动条的尽头，只要滚动滚轮依旧会触发事件，wheel事件有默认行为，当
                      事件的回调执行完成后会使滚动条滚动一段距离，不过如果事件的回调需要执行的时间过长
                      默认行为就会有问题，所以可以使用passive使默认行为先执行完成后再执行事件回调
 -->
<body>

        <div id="root">
            <h2>欢迎来到人间</h2>

            <!-- 点击a标签，由于有默认事件，在执行完点击事件的回调后会跳转到另一个网页，需要阻止默认事件-->
            <!-- prevent -->
            <a href="https://www.baidu.com/s?wd=%E7%99%BE%E5%BA%A6" @click.prevent = "showInfo">点我提示信息</a>



            <!-- box1中有box2，当他们身上都绑定有相同类型的事件时，触发了内部的事件就会冒泡给
                 外面的元素，导致外面的元素身上的事件也执行，此时需要使用阻止事件冒泡 -->
            <!-- stop -->     加在子元素上
            <div class="box1" @click = "showInfo">
                你的家人都很喜爱你呢
                <div class="box2" @click.stop = "showInfo1">
                   健康快乐地长大吧
                </div>
            </div>



            <!-- 为这个按钮绑定点击事件后，只要点击了就会触发回调，可以使用once使它仅仅执行一次 -->
            <!-- once -->
            <button class="btn" @click.once = "showInfo1">点我一下</button>




            <ul @click.self = "showTarget">
                <li>我是li1</li>
                <li>我是li2</li>
            </ul>



            <div class="srco" @wheel = "showTarget">
                <p>1111111111111</p>
            </div>




<!-- 
            当一个a标签存在于一个div中，div和a标签都绑定了相同事件，那么此时点击
            a标签就会同时触发事件冒泡和默认行为：跳转，所以此时就需要事件修饰符连用, @click.prevent.stop
                    
-->
            <div class="smlbox" @click = "showInfo">
                <a href="https://www.baidu.com/s?wd=%E7%99%BE%E5%BA%A6" @click.prevent.stop = "showInfo">点我提示信息</a>
            </div>

        </div>
</body>
</html>
<script>
    new Vue({
        el:'#root',
        methods:{
            showInfo(e){
                // 在原生js中阻止默认事件使用
                // e.preventDefault()
                alert('你是一个八斤重的可爱宝宝呢')
            },
            showInfo1(e){
                // 在原生js中阻止冒泡
                // e.stopPropagation
                alert('我出来啦')
            },
            showTarget(e){
                console.log(e);
                console.log(e.target);
            }
        }
    })
</script>